<style lang="less">
	.comment-title{
		padding:1em 15px;
		border-bottom: 1px solid #ccc;
	}
	.no-long-comment{
		min-height: 400px;
		border-bottom: 1px solid #ccc;
		text-align: center;
		span{
			font-size: 20px;
			color: #ccc;
			line-height: 400px;
		}
	}
	.toggle-down{
		transform:rotate(90deg) scale(0.5,1);
		--webkit-transform: rotate(90deg) scale(0.5,1);
		font-weight: lighter;
		font-size: 18px;
		&.comments-show{
			transform:rotate(-90deg) scale(0.5,1);
		--webkit-transform: rotate(-90deg) scale(0.5,1);
		}

	}
	.comments-item{
		padding:15px;
		border-bottom: 1px solid #ccc;
		.comment-user{
			position: relative;
			padding-left:40px;
			margin-bottom: 10px;
			img{
				position: absolute;
				left:0;
				top:0;
			}
		}
	}
	.comment-like{
		color:#ccc;
		i{
			margin-right: 5px;
		}
	}
	.comment-content{
		padding-left: 40px;
		padding-right: 5px;
	}
	.comment-reply{
		color:#ccc;
	}
	.user-name{
		color:#333;
		font-weight:bold;
	}
	.comment-time{
		display: block;
		margin-top: 15px;
		font-size: 12px;
		color: #ccc;
	}
</style>
<template>
	<div class="comments">
		 <header class="header">
	      <a @click="prevPage"><i class="fa fa-arrow-left"></i></a>
	      <span>{{allCommentsAccount}}条点评</span>
	      <div class="right">
	      	<a class="fa fa-edit"></a>
	      </div>
	    </header>
	    <div class="comments-list">
	    	<ul class="long-comments">
	    		<div class="comment-title">
	    			<span class="long-comment-amount">{{longCommentsAccount}}</span>条长评
	    		</div>
	    		<!-- <div class="no-long-comment">
	    			<span>暂无评论</span>
	    		</div> -->
	    		<li v-for="longComment in longComments" class="comments-item">
	    			<div class="comment-user">
	    				<img :src="imgUrl+'/public-pic?img='+longComment.avatar" class="img-circle" width="30" height="30" />
	    				<span class="user-name">{{longComment.author}}</span>
	    				<span class="comment-like right">
								<i class="fa fa-thumbs-up"></i>{{longComment.likes}}
	    				</span>
	    			</div>
	    			<div class="comment-content">
	    				{{longComment.content}}
	    				<div class="comment-reply" v-if="longComment.reply_to">
	    					<span class="user-name">//{{longComment.reply_to.author}} : </span>
	    					{{longComment.reply_to.content}}

	    				</div>
	    				<span class="comment-time">{{longComment.time|formatDate}}</span>
	    			</div>
	    		</li>
	    	</ul>
	    	<ul class="short-comments">
	    		<div class="comment-title" @click="getShortComments" >
	    			<span class="short-comment-amount">{{shortCommentsAccount}}</span>条短评
	    			<span class="toggle-down right" :class="{'comments-show':!hideShortComments }" >>></span>
	    		</div>
	    		<li v-for="shortComment in shortComments" class="comments-item" :class="{'hide':hideShortComments}">
	    			<div class="comment-user">
	    				<img :src="imgUrl+'/public-pic?img='+shortComment.avatar" class="img-circle" width="30" height="30" />
	    				<span class="user-name">{{shortComment.author}}</span>
	    				<span class="comment-like right">
								<i class="fa fa-thumbs-up" ></i>{{shortComment.likes}}
	    				</span>
	    			</div>
	    			<div class="comment-content">
	    				{{shortComment.content}}
	    				<div class="comment-reply" v-if="shortComment.reply_to">
	    					<span class="user-name">//{{shortComment.reply_to.author}} : </span>
	    					{{shortComment.reply_to.content}}

	    				</div>
	    				<span class="comment-time">{{shortComment.time|formatDate}}</span>
	    			</div>
	    		</li>
	    	</ul>
	    </div>
	</div>
</template>
<script type="text/javascript">
import {mapState} from 'vuex'
	export default {
		data() {
			return {
				hideShortComments:true
			}
		},
		computed:mapState({
			imgUrl: state => state.imgUrl,
			longComments: state => state.longComments,
			shortComments: state => state.shortComments,
			allCommentsAccount: state => state.newsExtra.comments,
			longCommentsAccount: state => state.newsExtra.longComments,
			shortCommentsAccount: state => state.newsExtra.shortComments

		}),

		methods:{
			prevPage() {
				 this.$router.go(-1)
         this.$store.commit('CHANGE_TRANSITION')
			},
			getShortComments() {
				if(this.hideShortComments){
					let id = this.$route.params.id;
					 this.$store.dispatch('getData',{
		        url:'/api/4/story/'+ id +'/short-comments',
		        mutation: 'GET_SHORT_COMMENTS'
		      });
				}
				this.hideShortComments = !this.hideShortComments
			},


		},
		filters:{
			formatDate:function(value) {
				let time = new Date(value*1000);
        let year = time.getYear();
        let month = time.getMonth()+1;
        let date = time.getDate();
        let hour = time.getHours();
        let minute = time.getMinutes();
        let second = time.getSeconds();
        if(hour.toString().length<2){
          hour = '0'+ hour
        }
        if(minute.toString().length<2){
          minute = '0'+ minute
        }
        return month +"-"+ date +"   "+ hour +":"+ minute;
			}
		},
		created() {
			 let id = this.$route.params.id;
			 this.$store.dispatch('getData',{
        url:'/api/4/story-extra/'+ id,
        mutation: 'GET_NEWS_EXTRA'
      });
      this.$store.dispatch('getData',{
        url:'/api/4/story/'+ id +'/long-comments',
        mutation: 'GET_LONG_COMMENTS'
      });
      setTimeout(()=>{
      	console.log(this.$store.state.newsExtra)
      },1000)

		}
	}
</script>
